<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>图片空间</title>
    <link rel="stylesheet" href="../../css/normalize.min.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/bootstrap.cosmo.css">
    <link rel="stylesheet" href="../../plugin/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <!-- <link rel="stylesheet" href="https://bootswatch.com/3/united/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../../plugin/icheck/skins/all.css">
    <link rel="stylesheet" href="../../plugin/icheck/skins/flat/flat.css">
    <link rel="stylesheet" href="../../plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="../../plugin/baguetteBox/dist/baguetteBox.min.css">

    <!---->
    <link rel="stylesheet" href="../../plugin/upload/bootstrap-fileinput-master-update/css/fileinput.css">
    <link rel="stylesheet" href="../../plugin/upload/bootstrap-fileinput-master-update/themes/explorer/theme.css">
    <!---->
    <style media="screen">
        .form-group {
            margin-bottom: 0;
        }

        body {
            padding-bottom: 80px;
        }

        #productList tbody td {
            vertical-align: middle;
        }

        .albumBox {
            cursor: pointer;
        }

        .gallery a {
            margin-bottom: 10px;
        }

        li {
            list-style: none;
        }

        .gallery {
            background-color: #f1f1f;
            padding: 20px 0;
        }

        .gallery a {
            display: block;
            margin-bottom: 1px;
            /*padding: 0 ;*/
            overflow: hidden;
            display: block;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            position: relative;
        }

        .gallery a img {
            width: 100%;
        }

        .radio label,
        .checkbox label {
            padding-left: 0px;
        }
    </style>
</head>

<body>
    <div class="configNav"></div>

    <div class="container-fluid">
        <div class="row">
            <!--leftcontent start-->
            <div class="col-md-2">
                <div class="list-group">
                    <a href="./com_release.html" class="list-group-item">商品发布</a>
                    <a href="./com_insale.html" class="list-group-item">出售中的商品</a>
                    <a href="./com_warehouse.html" class="list-group-item">仓库中的商品</a>
                    <a href="./com_picspace.html" class="list-group-item active">图片空间</a>
                </div>
            </div>
            <!--leftcontent end-->

            <!--rightcontent start-->
            <div class="col-md-10">
                <ol class="breadcrumb">
                    <li><a href="javascript:void(0)">商家管理中心</a></li>
                    <li><a href="javascript:void(0)">商品</a></li>
                    <li class="active">出售中的商品</li>
                </ol>
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="./com_warehouse.html">我的相册</a></li>
                    <!-- <li role="presentation"><a href="./com_warehouse.html">水印管理</a></li> -->
                    <div class="btn-group pull-right btn-group-sm" role="group" aria-label="...">
                        <button type="button" class="btn btn-success" id="btnCreateAlbum" data-toggle="modal" data-target="#createAlbumModal"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;创建相册</button>
                        <button type="button" class="btn btn-danger" id="btnUploadPic" data-toggle="modal" data-target=".bs-example-modal-lg"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;上传图片</button>
                    </div>
                </ul>
                <div class="page-header" style="overflow:hidden;zoom:1;margin:10px 0;">
                    <input type="checkbox" class="deleteCtrl" value="option1" aria-label="...">&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger btn-sm deleteCtrl" id=""><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;删除</button>
                </div>
                <div class="row">
                    <ul class="baguetteBoxOne gallery" id="imgListBox">
                        <!-- <li>
                            <a href="javascript:;">
                                <img src="" alt="">
                            </a>
                        </li> -->
                    </ul>
                </div>
                <!-- row end -->

                <!-- <table class="table" style="margin-bottom:0">

                </table> -->
                <!-- 分页 -->
                <nav aria-label="...">
                    <div class="">
                        <span id="pageNum">共&nbsp;<strong></strong>&nbsp;页&nbsp;/&nbsp;</span><span id="totalNum">&nbsp;<strong>0</strong>&nbsp;条数据</span>
                    </div>
                    <ul id="example"></ul>
                </nav>

            </div>
            <!--rightcontent end-->
        </div>
        <!-- row end -->
    </div>
    <!-- container end -->

    <!-- Modal -->
    <div class="modal fade" id="createAlbumModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">创建相册</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="albumName" class="col-sm-3 control-label"><span class="text-danger">*</span>相册名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="albumName" placeholder="">
                            </div>
                        </div><br>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">描述：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3" id="albumDes"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnSubmit">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->


    <!-- Modal -->
    <div class="modal fade" id="updateAlbumModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label"><span class="text-danger">*</span>相册名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="" placeholder="">
                            </div>
                        </div><br>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">描述：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->

    <!-- Modal -->
    <div class="modal fade" id="delAlbumModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel3">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label"><span class="text-danger">*</span>相册名称：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="" placeholder="">
                            </div>
                        </div><br>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">描述：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->



    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeodalLabel" id="upImgModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="">上传</h4>
                </div>
                <div class="modal-body">
                    <!-- <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">选择相册：</label>
                            <select class="form-control" id="albumsSel">
                                <option>默认相册</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </form><br> -->
                    <div class="container kv-main" style="width:auto;padding:0">
                        <form enctype="multipart/form-data">
                            <input id="kv-explorer" type="file" name="dUserFile" multiple>
                            <br>
                        </form>
                    </div>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-primary">提交</button>
                </div> -->
            </div>
        </div>
    </div>


    <script src="../../js/jquery.min.js" charset="utf-8"></script>
    <script src="../../js/common.js" charset="utf-8"></script>
    <script src="../../js/nav.js" charset="utf-8"></script>
    <script src="../../js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js" charset="utf-8"></script>
    <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="utf-8"></script>
    <script src="../../plugin/wangEditor/release/wangEditor.min.js" charset="utf-8"></script>
    <!-- <script src="../js/com_release.js" charset="utf-8"></script> -->
    <script src="../../plugin/icheck/icheck.min.js" charset="utf-8"></script>
    <script src="../../plugin/layer/layer.js" charset="utf-8"></script>
    <script src="../../plugin/baguetteBox/dist/baguetteBox.min.js" charset="utf-8"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/js/plugins/sortable.js" charset="utf-8"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/js/fileinput.min.js" charset="utf-8"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/js/locales/zh.js" charset="utf-8"></script>
    <script src="../../plugin/upload/bootstrap-fileinput-master-update/themes/explorer/theme.min.js" charset="utf-8"></script>
    <script src="../../js/ajax.js" charset="utf-8"></script>
    <script src="../../js/bootstrap-paginator.js" charset="utf-8"></script>

    <script type="text/javascript">
        //浏览器改变大小图片比例
        $(window).resize(function() {
            $('.gallery a').height($('.gallery a').width())
        });

        $('input').iCheck({
            checkboxClass: 'icheckbox_flat',
            radioClass: 'iradio_flat'
        });

        function getQueryString(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var result = window.location.search.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : null;
        }

        console.log(getQueryString('storeid'));
        //初始化当前页//
        var page = 1;
        //一页的条数
        var pagesize = 100;
        $(document).ready(function() {
            imgListInit()
        });
        var pageUrls = serverURL + '/goods/queryAlbumPic';
        //http://axyhpic.oss-cn-zhangjiakou.aliyuncs.com
        function imgListInit() {
            data = {
                'page': page,
                'pageSize': pagesize,
                'aclassId': getQueryString('id')
            };
            data.page = 1;
            ajax(
                pageUrls,
                data,
                pageNumList,
                'post',
                'json'
            )
        }

        function OpendList(res) {
            $('#imgListBox').empty();
            var data = res.data.list;
            var html = '';
            for (i in data) {
                var imgStr = data[i].apicCover;
                var imgStartPos = imgStr.indexOf('/');
                var imgTit = imgStr.substr(imgStartPos + 1, );
                html += '<li class="col-sm-6 col-md-2">' +
                    '<a class="thumbnail" href="http://axyhpic.oss-cn-zhangjiakou.aliyuncs.com//' + data[i].apicCover + '" data-caption="' + imgTit + '" >' +
                    '<img alt="' + imgTit + '" src="' + 'http://axyhpic.oss-cn-zhangjiakou.aliyuncs.com//' + data[i].apicCover + '"></a>' +
                    '<div class="checkbox"><label><input class="comCkeckbox" type="checkbox" data-id="' + data[i].apicId + '" class="choose" value="0" aria-label="...">&nbsp;&nbsp;选择</label></div>' +
                    '</li>'
            }
            $('#imgListBox').append(html);
            baguetteBox.run('.baguetteBoxOne');
            $('.gallery a').height($('.gallery a').width())

            $('input').iCheck({
                checkboxClass: 'icheckbox_flat-red pull-left',
                radioClass: 'iradio_flat-red pull-left'
            });
            $('.deleteCtrl').on('ifChecked', function() {
                $('.comCkeckbox').iCheck('check');
                $('.deleteCtrl').iCheck('check');
            });
            $('.deleteCtrl').on('ifUnchecked', function() {
                $('.comCkeckbox').iCheck('uncheck');
                $('.deleteCtrl').iCheck('uncheck');
            });
            var totalCheckBox = $('.comCkeckbox').length;
            // console.log('sfsdf:'+totalCheckBox);
            $('.comCkeckbox').on('ifChecked', function() {
                var curCheckBoxLen = $('.comCkeckbox').parents('.icheckbox_flat-red.checked').length + 1;
                // console.log(curCheckBoxLen);
                if (curCheckBoxLen == totalCheckBox) {
                    $('.deleteCtrl').parents('.icheckbox_flat-red').addClass('checked');
                }
            });

            $('.comCkeckbox').on('ifUnchecked', function() {
                var curCheckBoxLen = $('.comCkeckbox').parents('.icheckbox_flat-red.checked').length - 1;
                // console.log(curCheckBoxLen);
                if (curCheckBoxLen < totalCheckBox) {
                    $('.deleteCtrl').parents('.icheckbox_flat-red').removeClass('checked');
                }
            });
        }

        $(".albumBox").hover(
            function() {
                var i = $(this).index();
                $('.editBtnGrp:eq(' + i + ')').removeClass('invisible');
            },
            function() {
                $('.editBtnGrp').addClass('invisible');
            }
        );

        $('.btnEditAlbum').on('click', function() {
            $('#updateAlbumModal').modal()
        });

        $('.btnDelAlbum').on('click', function() {
            layer.msg('确定删除？', {
                time: 0 //不自动关闭
                    ,
                btn: ['确定', '取消'],
                yes: function(index) {
                    layer.close(index);

                }
            });
        });

        $("#kv-explorer").fileinput({
            'theme': 'fa',
            language: 'zh',
            allowedFileExtensions: ['jpg', 'gif', 'png'],
            maxFileSize: 2048,
            'uploadUrl': serverURL + '/goods/getOssUpload',
            overwriteInitial: false,
            'uploadExtraData': {
                'imgPath': 'goods',
            }
        });

        $("#kv-explorer").on("fileuploaded", function(event, data, previewId, index) {
            console.log(data);
            if (data.response.code == '200') {
                var url = serverURL + '/goods/addAlbumPic';
                data = {
                    'apicName': data.files[index].name,
                    'aclassId': getQueryString('id'),
                    'apicCover': data.response.data.apicCover,
                    'apicSize': data.response.data.apicSize,
                    'apicSpec': data.response.data.apicSpec
                    // 'storeId': getQueryString('storeid')
                };
                var cbk = function(res) {
                    console.log(res);
                }
                ajax(
                    url,
                    data,
                    cbk,
                    'post',
                    'json'
                )
            }
        });

        var chosenList = '';
        $('.deleteCtrl').click(function() {
            $('input.comCkeckbox:checked').each(function(i) {
                chosenList += $(this).attr('data-id') + ',';
            })
            console.log(chosenList);
            superDelFun()
        });

        function superDelFun() {
            layer.msg('确定删除？', {
                time: 0,
                btn: ['确定', '取消'],
                yes: function(index) {
                    var delUrl = serverURL + '/goods/deleteAlbumPic';
                    var cbk = function () {
                        // imgListInit()
                        //console.log(page);
                        window.location.reload()
                    }
                    data = {
                        'apicId': chosenList
                    };
                    ajax(
                        delUrl,
                        data,
                        cbk,
                        'post',
                        'json'
                    )
                    layer.close(index);
                }
            });
        };

        $('#btnSubmit').click(function() {
            createAlbumFun()
        })

        function createAlbumFun() {
            if ($('#albumName').val() == '') {
                return;
            }
            var albumUrl = serverURL + '/goods/addAlbumClass';
            data = {
                'aclassName': $('#albumName').val(),
                'aclassDes': $('#albumDes').val(),
                // 'storeId': 1
            };
            ajax(
                albumUrl,
                data,
                pagelist,
                'post',
                'json'
            );
            $('#createAlbumModal').modal('hide')
        }

        $('#upImgModal').on('hidden.bs.modal',function () {
            imgListInit()
        })
    </script>
</body>

</html>
